<template>
	<view class="box">
		<view class="xiugai">
			<text>信息修改间隔7天可修改!</text>
		</view>
		<view class="inp">
			<text>名称:</text>
			<input type="text" maxlength="8" v-model="formData.user_name">
		</view>
		<view class="tip">
			注：小于等于8位
		</view>
		<view class="inp">
			<text>电话:</text>
			<input type="number" maxlength="11" v-model="formData.phone">
		</view>
		<view class="tip">
			注：11位数字
		</view>
		<view class="inp">
			<text>密码:</text>
			<input type="text" maxlength="11" v-model="formData.pwd">
		</view>
		<view class="tip">
			注：7~11位数字加字母的组合
		</view>
		<view class="inp">
			<text>头像:</text>
			<input type="text" maxlength="500" v-model="formData.head_imgurl">
		</view>
		<view class="tip">
			例：'http://com.baidu/picture.png'且长度<=500 </view>
				<view class="inp">
					<text>性别:</text>
					<radio-group @change="radioChange">
						<label class="hbh_sex" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current"/>
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="tip">
					注：单选，默认男
				</view>
				<view class="inp">
					<text>年龄:</text>
					<input type="number" maxlength="2" v-model="formData.age">
				</view>
				<view class="tip" style="color: red;">
					提示：点击编辑后输入框才可输入修改哦！
				</view>
				<view class="btnBox" @click="baocun">
					保存并修改
				</view>
		</view>
</template>

<script>
	import {
		putUserInfo
	} from "@/api/index.js"
	export default {
		data() {
			return {
				items: [{
						value: '男',
						name: '男',
						checked: 'true'
					},
					{
						value: '女',
						name: '女'
					}
				],
				current: 0,
				isPut:true,
				formData: {
					user_name: "",
					phone: "",
					pwd: "",
					head_imgurl: "",
					sex: "男",
					age: 18
				},
				formData2: {
					user_name: "",
					phone: "",
					pwd: "",
					head_imgurl: "",
					sex: "男",
					age: 18
				},
				lastPutTime: ""
			};
		},
		onLoad(option) {
			let obj = JSON.parse(option.userInfo)
			this.lastPutTime = obj.update_time
			obj.head_imgurl = decodeURIComponent(obj.head_imgurl)
			Object.keys(this.formData).forEach((item, index) => {
				this.formData[item] = obj[item]
				this.formData2[item] = obj[item]
			})
			// console.log(this.formData)
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.formData.sex = evt.detail.value
						this.current = i;
						break;
					}
				}
			},
			handle() {
				this.isPut = !this.isPut
			},
			isObjectEqual(obj1, obj2) {
				const obj1Keys = Object.keys(obj1);
				const obj2Keys = Object.keys(obj2);

				if (obj1Keys.length !== obj2Keys.length) {
					return false;
				}

				for (let key of obj1Keys) {
					if (obj1[key] !== obj2[key]) {
						return false;
					}
				}

				return true;
			},
			baocun() {
				if(!this.isPut){
					return
				}
				this.isPut = false
				let long = Date.parse(new Date()) - new Date(this.lastPutTime).valueOf()
				let oneMonth = 1 * 24 * 60 * 60 * 1000
				if (oneMonth < long) {
					if (this.isObjectEqual(this.formData, this.formData2)) {
						this.isPut = true
						uni.showToast({
							icon: "none",
							title: "未修改任何信息!"
						})
					} else {
						let index = Object.keys(this.formData).findIndex(item => this.formData[item] ==
							'' ||
							this
							.formData[
								item] == null || this.formData[item] ==
							undefined)
						if (index == -1) {
							putUserInfo(this.formData).then((res) => {
								console.log(res)
								this.isPut = true
								if (res.code == 200) {
									uni.showToast({
										icon: "none",
										title: res.msg
									})
									setTimeout(() => {
										uni.removeStorageSync("TOKEN")
										uni.reLaunch({
											url: '/pages/login/login'
										});
									}, 1000)
								}
							}).catch((err) => {
								this.isPut = true
								uni.showToast({
									icon: "none",
									title: "修改失败，检查信息并重新尝试！"
								})
								console.log(err)
							})
						} else {
							this.isPut = true
							switch (index) {
								case 0:
									uni.showToast({
										icon: "none",
										title: "名称不能为空"
									})
									break;
								case 1:
									uni.showToast({
										icon: "none",
										title: "电话不能为空"
									})
									break;
								case 2:
									uni.showToast({
										icon: "none",
										title: "密码不能为空"
									})
									break;
								case 3:
									uni.showToast({
										icon: "none",
										title: "头像不能为空"
									})
									break;
								case 4:
									uni.showToast({
										icon: "none",
										title: "性别不能为空"
									})
									break;
								case 5:
									uni.showToast({
										icon: "none",
										title: "年龄不能为空"
									})
									break;
								default:
									uni.showToast({
										icon: "none",
										title: "异常"
									})
							}
						}
					}
				} else {
					this.isPut = true
					uni.showToast({
						icon: "none",
						title: "距离上次修改信息不足一周！"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		padding: 40rpx;
		box-sizing: border-box;

		.xiugai {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text:nth-of-type(1) {
				color: red;
				font-size: 30rpx;
			}

			text:nth-of-type(2) {
				height: 80rpx;
				width: 100rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}

		.btnBox {
			position: fixed;
			z-index: 1;
			bottom: 100rpx;
			left: calc(50% - 150rpx);
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 20rpx;
			background-color: blue;
			color: #fff;
		}

		.inp {
			height: 80rpx;
			display: flex;
			margin-bottom: 20rpx;

			text {
				width: 120rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #ccc;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				color: #fff;
			}

			input {
				flex: 1;
				height: 80rpx;
				background-color: #e6e6e6;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			radio-group {
				flex: 1;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-color: #e6e6e6;
				border-top-right-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.hbh_sex {
					display: flex;
				}
			}
		}

		.tip {
			height: 60rpx;
			margin-bottom: 20rpx;
			line-height: 60rpx;
			font-size: 30rpx;
		}
	}
</style>